<template>
  <div class="layout-container">
    <!-- 左侧导航栏 -->
    <el-aside width="200px">
      <el-menu
        :default-openeds="['1']"
        :unique-opened="true"
        router
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>汽车修理后台管理</span>
          </template>
          <el-menu-item index="/shoppingordermanage">商城订单管理</el-menu-item>
          <el-menu-item index="/maintorder">维修订单管理</el-menu-item>
          <el-menu-item index="/addressmanage">收货地址管理</el-menu-item>
          <el-menu-item index="/adminmanage">登陆人管理</el-menu-item>
          <el-menu-item index="/goodsmanage">商品管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 右侧内容区域 -->
    <el-main>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.comname"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="待付款" value="1">待付款</el-option>
            <el-option label="代发货" value="2">代发货</el-option>
            <el-option label="待收货" value="3">待收货</el-option>
            <el-option label="待评价" value="4">待评价</el-option>
            <el-option label="已取消" value="5">已取消</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findShoppingOrder()">查询</el-button>
          <el-button type="primary" @click="form={}">清空</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border>
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="photo"-->
<!--          label="商品图片">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="comname"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格">
        </el-table-column>
        <el-table-column
          prop="sales"
          label="商品销量">
        </el-table-column>
        <el-table-column
          prop="details"
          label="商品详情">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="images"-->
<!--          label="商品详情图片">-->
<!--        </el-table-column>-->
        <el-table-column
          label="商品状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success">待付款</el-tag>
            <el-tag v-if="scope.row.status == 2" type="success">代发货</el-tag>
            <el-tag v-if="scope.row.status == 3" type="success">待收货</el-tag>
            <el-tag v-if="scope.row.status == 4" type="success">待评价</el-tag>
            <el-tag v-if="scope.row.status == 5" type="success">已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="订单个数">
        </el-table-column>
        <el-table-column
          prop="priceorder"
          label="订单总价">
        </el-table-column>
        <el-table-column
          prop="dingname"
          label="下单人姓名">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="shithods"
          label="配送方式">
        </el-table-column>
        <el-table-column
          prop="freight"
          label="运费">
        </el-table-column>
        <el-table-column
          prop="ordernotes"
          label="订单备注">
        </el-table-column>
        <el-table-column
          prop="createdata"
          label="下单时间">
        </el-table-column>
        <el-table-column
          prop="paymentime"
          label="付款时间">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="todelete(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "LayoutPage",
  data() {
    return {
      tableData: [],
      form: {},
    }
  },
  methods: {
    todelete(id){
      axios.post("/shoppingorder/delete?id="+id).then(res=>{
        this.$message(res.data.message);
        this.findShoppingOrder();
      })
    },
    findShoppingOrder() {
      axios.post("/shoppingorder/findShoppingOrder",this.form).then(res => {
        this.tableData = res.data.data.list;
      })
    }
  },
  created() {
    this.findShoppingOrder();
  }
};
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
}

.el-aside {
  background-color: #545c64;
}

.el-main {
  flex: 1;
  padding: 20px;
}
</style>
